<!-- 文章列表页面 -->
<template>
  <div>
    <!-- <h4 style="margin-left: 10px;color: #d6a20f;"文章列表页面</h4> -->
    <a-card>
      <a-row :gutter="20">
<!--         搜索框 -->
        <a-col :span="6">
          <a-input-search v-model="queryParam.keywords" placeholder="请输入关键词查找" enter-button allowClear @search="searchArtList" />
        </a-col>
<!--         添加按钮 -->
        <a-col :span="6">
          <a-button type="primary" @click="$router.push('addarticle')">写文章</a-button>
        </a-col>
<!--        <a-col :span="6">-->
<!--          <a-select defaultValue="请选择分类" style="width: 200px;" @change="cateChange">-->
<!--            <a-select-option v-for="cate in cateList" :key="cate.id" :value="cate.id">-->
<!--              {{cate.name}}-->
<!--            </a-select-option>-->
<!--          </a-select>-->
<!--        </a-col>-->
      </a-row>

      <!-- 文章信息显示表格 -->
      <a-table :columns="columns" rowKey="ID" :pagination="pagination" :data-source="Artlist" @change="handleTableChange" bordered>

        <!-- 文章标签 -->
        <template slot="tags" slot-scope="tags">
          <span>
            <a-tag v-for="tag in tags" :key="tag.ID" color="blue">{{ tag.name }}</a-tag>
          </span>
        </template>

        <template slot="top" slot-scope="text, record">
          <a-switch checked-children="on" un-checked-children="off" :checked="record.top === 1" @change="topChange(record)"/>
        </template>

        <template slot="reward" slot-scope="text, record">
          <a-switch checked-children="on" un-checked-children="off" :checked="record.reward === 1" @change="rewardChange(record)"/>
        </template>

        <template slot="status" slot-scope="text, record" >
          <a-tag color="green" v-if="record.status === 0" >已发布</a-tag>
          <a-tag color="red" v-if="record.status === 1" >草稿</a-tag>
        </template>

        <!-- 操作按钮 -->
        <template slot="action" slot-scope="data">
          <div class="actionSlot">
            <a-button type="primary" size="small" icon="edit" style="margin: 0 5px;" @click="$router.push(`addarticle/${data.ID}`)">
              编辑
            </a-button>
            <a-button type="danger" size="small" icon="delete" style="margin: 0 5px;" @click="deleteArt(data.ID)">
              删除
            </a-button>
          </div>
        </template>
      </a-table>

    </a-card>
  </div>
</template>

<script>
// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    width: '5%',
    key: 'id',
    align: 'center'
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    width: '10%',
    key: 'title',
    align: 'center'
  },
  {
    title: '分类',
    dataIndex: 'Category.name',
    width: '5%',
    key: 'name',
    align: 'center'
  },
  {
    title: '标签',
    dataIndex: 'Tags',
    width: '15%',
    key: 'tags',
    scopedSlots: { customRender: 'tags' },
    align: 'center'
  },
  {
    title: '文章描述',
    dataIndex: 'desc',
    width: '20%',
    key: 'desc',
    align: 'center'
  },
  {
    title: '浏览数',
    dataIndex: 'viewnum',
    width: '5%',
    key: 'viewnum',
    align: 'center'
  },
  {
    title: '点赞数',
    dataIndex: 'likenum',
    width: '5%',
    key: 'likenum',
    align: 'center'
  },
  {
    title: '顶置',
    dataIndex: 'top',
    width: '5%',
    key: 'top',
    scopedSlots: { customRender: 'top' },
    align: 'center'
  },
  {
    title: '打赏',
    dataIndex: 'reward',
    width: '5%',
    key: 'reward',
    scopedSlots: { customRender: 'reward' },
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '5%',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    align: 'center'
  },
  {
    title: '操作',
    width: '10%',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
export default {
  data () {
    return {
      // 分页配置
      pagination: {
        pageSizeOptions: ['10', '20'],
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `共${total}条`
      },
      // 文章列表数据
      Artlist: [],
      // 表格列信息（不可少）
      columns,
      // 分页查询参数
      queryParam: {
        // keywords: '', // 文章搜索文本
        pagesize: 10,
        pagenum: 1
      },
      // 分类列表数据
      cateList: []

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getArtList()
    this.getCateList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 方法集
  methods: {
    // 获取文章列表
    async getArtList () {
      const { data: res } = await this.$axios.get('/admin/articles', {
        params: {
          // keywords: this.queryParam.keywords,
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum
        }
      })
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.Artlist = res.data
      this.pagination.total = res.total
    },

    // 搜索
    async searchArtList () {
      const { data: res } = await this.$axios.get('/admin/article/search', {
        params: {
          keywords: this.queryParam.keywords
        }
      })
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.Artlist = res.data
      this.pagination.total = res.total
    },

    // 获取分类列表
    async getCateList () {
      const { data: res } = await this.$axios.get('/admin/categories')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.cateList = res.data
    },

    // 处理表格分页改变事件
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.queryParam.pagesize = pagination.pageSize
      this.queryParam.pagenum = pagination.current

      if (pagination.pageSize !== this.pagination.pageSize) {
        this.queryParam.pagenum = 1
        pager.current = 1
      }
      this.pagination = pager
      this.getArtList()
    },

    // 删除文章
    deleteArt (id) {
      this.$confirm({
        title: '提示：请再次确认',
        content: '确定删除此文章吗?一旦删除，不可恢复。',
        onOk: async () => {
          const res = await this.$axios.delete(`/admin/article/${id}`)
          if (res.status !== 200) {
            return this.$message.error(res.message)
          }
          this.$message.success('删除成功')
          this.getArtList()
        },
        onCancel: () => {
          this.$message.info('操作已取消')
        }
      })
    },

    // 修改顶置
    async topChange (record) {
      record.top = record.top === 1 ? 0 : 1
      const { data: res } = await this.$axios.put(`/admin/article/top?id=${record.ID}&top=${record.top}`)
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.$message.success('操作成功')
    },

    // 修改打赏
    async rewardChange (record) {
      record.reward = record.reward === 1 ? 0 : 1
      const { data: res } = await this.$axios.put(`/admin/article/reward?id=${record.ID}&reward=${record.reward}`)
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.$message.success('操作成功')
    },
    // 分类选择事件
    cateChange (val) {
      this.getCateArt(val)
    },
    // 查询分类下的文章
    async getCateArt (id) {
      const { data: res } = await this.$axios.get(`/category/${id}/artlist`)
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.Artlist = res.data
      this.pagination.total = res.total
    }

  }
}
</script>
<style scoped>
  .actionSlot {
    display: flex;
    justify-content: center;

  }
</style>
